<script setup lang="ts">
import { ref } from "vue"
import { $t } from '#/locales'
import { IconifyIcon, Search } from '@vben/icons';
import { ElInput } from "element-plus";
import { lucideIcons } from './const'
import { cloneDeep } from '@vben/utils';

defineOptions({ name: 'Dialog' })

const props = defineProps({
  icon: {
    type: String,
    default: ''
  }
})
const iconList = ref(cloneDeep(lucideIcons))
const dialogVisible = ref(false)
const emit = defineEmits(['updateIcon'])
const formIconRef = ref()
const defaultFormInline = {
  name: ""
}
const formInline = ref({ ...defaultFormInline })
const activeIcon = ref('')

const pickActiveIcon = (item: string) => {
  activeIcon.value = item
}
const searchIcon = () => {
  if (!formInline.value.name) {
    iconList.value = cloneDeep(lucideIcons)
  } else {
    iconList.value = cloneDeep(lucideIcons).filter((item: string) => item.includes(formInline.value.name))
  }
}
const handleClose = () => {
  formInline.value = { ...defaultFormInline }
  activeIcon.value = ''
  dialogVisible.value = false
}
const inint = () => {
  iconList.value = cloneDeep(lucideIcons)
  if (props.icon) {
    activeIcon.value = props.icon
  }
  dialogVisible.value = true
}

const submit = () => {
  if (!activeIcon.value) return
  emit('updateIcon', activeIcon.value)
  handleClose()
}

defineExpose({ inint })
</script>
<template>
  <el-dialog v-model="dialogVisible" :modal="false" :destroy-on-close="true" :title="$t('systemMenu.selectIconTxt')"
    width="800" :append-to-body="true" :close-on-click-modal="false" :before-close="handleClose">
    <el-form class="flex flex-wrap" ref="formIconRef" label-width="0px" @submit.prevent>
      <el-form-item label="">
        <el-input @blur="searchIcon" @keyup.enter="searchIcon" v-model="formInline.name" clearable :maxlength="50"
          :placeholder="$t('systemMenu.searchIconTxt')">
          <template #suffix>
            <Search class="size-5 @click='searchIcon' cursor-pointer"></Search>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <div class="min-h-[200px]">
      <div v-if="iconList.length > 0" class="icon-warp mb-5">
        <div class="icon-item" :class="{ 'active': activeIcon === item }" @click="pickActiveIcon(item)"
          v-for="item in iconList" :key="item">
          <el-tooltip :content="item" effect="dark" :show-after="500">
            <div class="icon-item-content">
              <IconifyIcon :icon="`lucide:${item}`" />
            </div>
          </el-tooltip>
        </div>
      </div>
      <div v-else class="text-center text-gray-500">
        {{ $t('common.emptyTxt') }}
      </div>
    </div>
    <template #footer>
      <div>
        <el-button @click="handleClose">
          {{ $t('common.cancelTxt') }}
        </el-button>
        <el-button type="primary" @click="submit">
          {{ $t('common.submitTxt') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.icon-warp {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 8px;
  width: 100%;

  .icon-item {
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    cursor: pointer;

    .icon-item-content {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &:hover,
    &.active {
      border-color: #0067D1;
    }

  }
}
</style>
